<template>
	<view class="wrap">
		<view class="activity-status">
			<text class="state">{{activityStatusStr}}</text>
			
			<text class="exchange" @click="redeemCodeShow = true">核销码</text>
			
		</view>
		<!-- 活动信息 -->
		<view class="box">
			<view class="basics">
				<text class="basics_title">订单编号:</text>
				<text class="basics_value">{{filterNull(orderDetail.orderNo)}}</text>
			</view>
			<view class="basics">
				<text class="basics_title">活动名称:</text>
				<text class="basics_value">{{filterNull(orderDetail.activityName)}}</text>
			</view>
			<view class="basics">
				<text class="basics_title">活动类型:</text>
				<text class="basics_value">{{filterNull(activityTypeStr)}}</text>
			</view>
			<view class="basics">
				<text class="basics_title">购买数量:</text>
				<text class="basics_value">{{filterNull(orderDetail.number)}}件</text>
			</view>
			<view class="basics">
				<text class="basics_title">购买时间:</text>
				<text class="basics_value">{{filterNull(orderDetail.payTime)}}</text>
			</view>
			<view class="basics">
				<text class="basics_title">合计金额:</text>
				<text class="basics_value">¥{{filterNull(orderDetail.amount)}}</text>
			</view>


			<!-- 退款信息 -->
			<view v-if="orderDetail.activityStatus == 5">
				<view class="basics">
					<text class="basics_title">退款时间:</text>
					<text class="basics_value">{{filterNull(orderDetail.refundTime)}}</text>
				</view>
				<view class="basics">
					<text class="basics_title">退款方式:</text>
					<text class="basics_value">{{filterNull(refundWayStr)}}</text>
				</view>
				<view class="basics">
					<text class="basics_title">退款金额:</text>
					<text class="basics_value">¥{{filterNull(orderDetail.refundAmount)}}</text>
				</view>
			</view>


		</view>
		<!-- 商品 -->
		<view v-if="orderDetail.shoppVoList.length > 0">
			<view class="sectionTitle">礼包详情</view>
			<view class="box" v-for="(item, index) in orderDetail.shoppVoList" :key="index">
				<view class="goods">
					<text class="goods_name">{{item.shoppingName}}({{item.serviceType == 1 ? '实物' : '卡劵'}})</text>
					<!-- <text class="goods_name">--{{item.serviceType == 1 ? '实物' : '卡劵'}}</text> -->
					<text class="goods_num">价值: ￥{{item.shoppingPrice}}</text>
					<text class="goods_num">数量: {{item.shoppingNum}}</text>
					<!-- <view class="goods_desc">缺少描述字段</view> -->
				</view>
			</view>
		</view>

		<!-- 使用门店 -->
		<view v-if="orderDetail.activityUnit.length > 0">
			<view class="sectionTitle">适用门店</view>
			<view class="box" v-for="(item, index) in orderDetail.activityUnit" :key="index">
				<view class="store">
					<view class="store_name">{{filterNull(item.applicableUnit)}}</view>
					<view class="store_address">{{filterNull(item.unitAddress)}}</view>
					<view class="store_other">
						<view class="distanceWrap">
							<text class="value">{{filterNull(item.distance)}}km</text>
							<text class="title">距离</text>
						</view>
						<!-- 			<view class="distanceWrap">
	 				<text class="value">3人</text>
	 				<text class="title">服务顾问</text>
	 			</view> -->

						<view class="">
							<image @click="callPhone(item.unitPhone)" class="icon-image"
								:src="phoneImg" mode=""></image>
							<image @click="navi(item)" class="icon-image" :src="naviImg"
								mode=""></image>
						</view>
					</view>
				</view>
			</view>

		</view>
		
		<u-popup :show="redeemCodeShow" mode="center" @close="redeemCodeShow=false" :closeable="true" round="10">
			<view class="codeBg">
				
				<image class="qrcode_pop" :src="path" mode="scaleToFill"></image>
				<!-- <uqrcode ref="uQRCode" mode="view" style="margin-top: 80upx;" size="180" :text="orderDetail.orderNo" /> -->
				<text style="margin-top: 30upx;">{{'('+ orderDetail.orderNo+')'}}</text>
				<text style="margin-top: 40upx;">请到店出示二维码进行消费</text>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		seckillOrderInfo,
		insertActivityBrowseRecords,
		coupongenerate
	} from '../../common/api.js'
	export default {
		data() {
			return {
				time: 0,
				timeNumber: 0,
				orderNo: '',
				lat: 0,
				lon: 0,
				orderDetail: {
					shoppVoList:[],
					activityUnit:[]
				},
				activityTypeStr: '',
				activityStatusStr: '',
				refundWayStr: '',
				naviImg:this.baseImageUrl+'uni_rental/导航_icon@2x.png',
				phoneImg:this.baseImageUrl+'uni_rental/电话_icon@2x.png',
				redeemCodeShow: false,
				path:''
			}
		},
		onLoad(op) {
			this.orderNo = op.orderNo;
			this.getLocation();
			this.reckonBytime()

		},
		beforeDestory() {
			this.insertActivityBrowseRecords()
			clearInterval(this.time)

		},
		methods: {
			insertActivityBrowseRecords() {
				insertActivityBrowseRecords({
					bizNo: this.activityId,
					memberNo: this.$store.state.user.userInfo.customerId,
					browseDuration: this.time,
					tenantId: this.$store.state.user.tenantCode,
					activityType: 1
				}).then(res => {})
			},
			reckonBytime() {
				this.time = setInterval(() => {
					this.timeNumber++
				}, 1000)
			},
			
			//获取定位信息
			getLocation() {
				uni.getLocation({
					type: 'wgs84',
					success: (res => {
						this.lat = res.latitude;
						this.lon = res.longitude;
						this.getOrderDetail();
					}),
					fail: (e => {
						this.getOrderDetail();
					})
				});
			},
			getOrderDetail() {
				let that = this;
				seckillOrderInfo({
					bizNo: that.orderNo,
					lat: that.lat,
					lon: that.lon
				}).then(res => {
					this.orderDetail = res;
					let activityType = this.orderDetail.activityType;
					switch (activityType) {
						case 1:
							this.activityTypeStr = '秒杀活动';
							break
						case 2:
							this.activityTypeStr = '集客活动'
							break
						case 3:
							this.activityTypeStr = '同行活动'
							break
						case 4:
							this.activityTypeStr = '抽奖活动'
							break
						default:
							this.activityTypeStr = '未知'
							break
					}

					let activityStatus = this.orderDetail.activityStatus;
					switch (activityStatus) {
						case 1:
							this.activityStatusStr = '未使用'
							break
						case 2:
							this.activityStatusStr = '已使用'
							break
						case 3:
							this.activityStatusStr = '已过期'
							break
						case 4:
							this.activityStatusStr = '已取消'
							break
						case 5:
							this.activityStatusStr = '已退款'
							break
						default:
							this.activityStatusStr = '未知'
							break
					}

					let refundWay = this.orderDetail.refundWay;
					switch (refundWay) {
						case 1:
							this.refundWayStr = '线上';
							break
						case 2:
						 this.refundWayStr = '线下';
							break
						default:
							this.refundWayStr = '未知';
							break
					}

					this.getQrcode();

				})
			},
			
			getQrcode(){
				coupongenerate({
					businessId:this.orderDetail.orderNo,
					codeType:1
				}).then(res=>{
					this.path = this.baseImageUrl+res.path;
				})
			},

			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					success: (res) => {
						console.log('拨打电话成功');
					}
				})
			},
			navi(item) {
				uni.openLocation({ //​使用微信内置地图查看位置。
					latitude: item.unitLat, //要去的纬度-地址
					longitude: item.unitLon, //要去的经度-地址
					name: item.applicableUnit,
					address: item.unitAddress,
					success() {
						console.log('成功了');
					},
					fail(msg) {
						console.log(msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 0 24upx;
	}

	.activity-status {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin: 35upx 0;
		
		.state{
			font-size: 32upx;
			font-weight: bold;
			color: #12b9a3;
		}
		
		.exchange{
			font-size: 32upx;
			font-weight: bold;
			color: #F83C57;
		}
		
	}

	.box {
		background-color: #fff;
		border-radius: 16upx;
		padding: 15upx 0;
		box-shadow: 0 0 0 NaNpx #000000;
		margin-bottom: 10upx;
	}

	.basics {
		padding: 10upx 25upx;
	
	&_title {
			font-size: 28upx;
			font-family: PingFang SC, PingFang SC-Medium;
			text-align: left;
			color: #999;
		}

		&_value {
			font-size: 28upx;
			font-family: PingFang SC, PingFang SC-Medium;
			text-align: left;
			color: #333;
			margin-left: 20upx;
		}
	}

	.sectionTitle {
		font-size: 28upx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: bold;
		color: #333;
		margin: 40upx 20upx 30upx 15upx;
	}

	.goods {
		padding: 10upx 25upx;
		position: relative;
		display: flex;
		justify-content: space-between;

		&_name {
			color: #333333;
			font-size: 26upx;
			font-weight: bold;
		}

		&_num {
			color: #333333;
			font-size: 26upx;
			font-weight: bold;
			// margin-left: 100upx;
			// position: absolute;
			// right: 100upx;
		}

		&_desc {
			margin-top: 20upx;
			font-size: 26upx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: bold;
			text-align: left;
			color: #999;
		}
	}

	.store {
		padding: 10upx 25upx;

		&_name {
			font-size: 26upx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: bold;
			color: #333;
			margin-top: 20upx;
		}

		&_address {
			font-size: 24upx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: bold;
			color: #999;
			margin-top: 20upx;
		}

		&_other {
			margin: 20upx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.distanceWrap {
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.title {
		font-size: 22upx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: bold;
		text-align: center;
		color: #999999;
	}

	.value {
		font-size: 26upx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: bold;
		text-align: left;
		color: #333333;
		margin-bottom: 10upx;
	}


	.icon-image {
		width: 34upx;
		height: 34upx;
		margin-left: 70upx;
	}
	
	.codeBg {
		width: 650upx;
		height: 700upx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.qrcode_pop{
		width: 415upx;
		height: 415upx;
		margin-top: 60upx;
	}
</style>
